import { createRouter, createWebHashHistory, createWebHistory, } from "vue-router";

// 加载条
import nProgress from "nprogress";
import "nprogress/nprogress.css";
// 关闭小圆圈
nProgress.configure({ showSpinner: false });

// 静态导入
// import HomeView from "../views/HomView.vue";
// import LoginView from "@/views/LoginView.vue";
// import AboutView from "../views/AboutView.vue";
// import MyView from "../views/MyView.vue";
// import BasketballView from "../views/BasketballView.vue";
// import CBAballView from "../views/ballChildren/CBAballView.vue";
// import NBAballView from "../views/ballChildren/NBAballView.vue";
// import NotFoundView from "../views/NotFoundView.vue";

// 动态导入(懒加载——可以优化代码的打包体积)
const HomeView = () => import('../views/HomView.vue')
const RegisterView = () => import('../views/RegisterView.vue')
const AboutView = () => import('../views/AboutView.vue')
const MyView = () => import('../views/MyView.vue')
const BasketballView = () => import('../views/BasketballView.vue')
const CBAballView = () => import('../views/ballChildren/CBAballView.vue')
const NBAballView = () => import('../views/ballChildren/NBAballView.vue')
const NotFoundView = () => import('../views/NotFoundView.vue')

// 路由配置
const routes = [
    // 【redirect】路由重定向
    { path: '/', redirect: '/home' },
    // 路由元信息——meta: { 业务逻辑;验证进入(requiresAuth: false);任何人都可进入(requiresAuth: true) },
    { path: "/home", component: HomeView, meta: { title: '首页' }, },
    { path: "/register", component: RegisterView, meta: { title: '注册' }, },
    { path: "/about", component: AboutView, name: 'gy', meta: { title: '关于' }, },
    // 定义路由参数
    { path: "/my/:username/:age", component: MyView, meta: { title: '我的' }, },
    {
        path: "/basketball", component: BasketballView, meta: { title: '🏀' },
        children: [
            { path: "nba", component: NBAballView, meta: { title: '🏀——NBA' }, },
            { path: "cba", component: CBAballView, meta: { title: '🏀——CBA' }, },
        ]
    },

    // 匹配任意路径(404)
    { path: '/:pathMatch(.*)*', component: NotFoundView, meta: { title: '404' }, }
];

const router = createRouter({
    // createWebHistory历史模式需要服务器额外配置
    // createWebHashHistory hash模式，路径会有#号
    history: createWebHistory(),
    routes,
});

// 导航前守卫(保安、门卫)
router.beforeEach((to, from, next) => {
    document.title = to.meta.title
    // 停止网页加载条
    nProgress.start();
    next();
});
// 导航后守卫
router.afterEach((to, from) => {
    // 停止网页加载条
    nProgress.done();
});

export default router;